<template>
	<view class="address" :style="{width:width+1+'px' }">

		<view class="nething" v-show="addressDate.length == 0 || Object.keys(DefultAddress).length == 0">
			<button type="default" size="mini" class="address_button" @click="show = true">选择地址</button>
		</view>
		<view class="address_main" @click="show = true" v-show="Object.keys(DefultAddress).length > 0">
			<view class="address_main_after">
				<uni-icons type="right"></uni-icons>
			</view>
			<view class="address_name">
				姓名:{{DefultAddress.name}}
			</view>
			<view class="address_text">
				{{` 地址:${DefultAddress.province} ${DefultAddress.city} ${DefultAddress.county} ${DefultAddress.address} ${DefultAddress.phone}`}}
			</view>
		</view>
		<u-popup :show="show" mode="bottom" @close="close" @open="open" :round="10">
			<scroll-view class="addressBox" scroll-y>
				<button type="default" size="mini" class="add_address" @click="scend_show = true">+</button>

				<view class="addressBox_list" v-for="item,index in addressDate" :key='index'
					@click="changeAddress(index)">
					<view class="address_name">
						姓名<br>{{item.name}}
					</view>
					<view class="address_text">
						{{` 地址:${item.province} ${item.city} ${item.county} ${item.address} ${item.phone}`}}
					</view>
					<view @click.stop="changDefultAddress(item.id,item.is_default)" class="address_info"
						:class="{isDefult: item.is_default == 1,isNotDefult:!item.is_default == 1}">
						{{ item.is_default ==1 ? '默认地址' : '设为默认'}}
					</view>
					<view class="delAddress address_info" @click="delAddress(item.id)">
						删除
					</view>
				</view>
				<view style="width: 100%;height: 1rpx;">
					
				</view>
			</scroll-view>
		</u-popup>
		<u-popup :show="scend_show" mode="bottom" style="z-index: 9999;" @close="scendClose" @open="open" :round="10">
			<scroll-view class="secend_hidden" scroll-y>
				<view class="secend_hidden_titel">
					添加地址
				</view>
				<view class="secend_hidden_input">
					<u--form labelPosition="left" :model="inputData" :rules="rules" ref="form">
						<u-form-item label="收货人" prop="name">
							<u--input v-model="inputData.name" border="none"></u--input>
						</u-form-item>
						<u-form-item label="电话" prop="phone">
							<u--input v-model="inputData.phone" border="none"></u--input>
						</u-form-item>
						<u-form-item label="省份" prop="province">
							<u--input v-model="inputData.province" border="none"></u--input>
						</u-form-item>
						<u-form-item label="城市" prop="city">
							<u--input v-model="inputData.city" border="none"></u--input>
						</u-form-item>
						<u-form-item label="区县" prop="county">
							<u--input v-model="inputData.county" border="none"></u--input>
						</u-form-item>
						<u-form-item label="详细地址" prop="address">
							<u--input v-model="inputData.address" border="none"></u--input>
						</u-form-item>
						<view class="secend_hidden_input_chacked">
							<checkbox :checked="inputData.is_default" /><text>是否设为默认地址</text>
						</view>
					</u--form>
					<button type="default" size="mini" class="sumb_input" @click="sumNewAddress">提交</button>
				</view>
			</scroll-view>
		</u-popup>
		
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex'
	export default {
		name: "addressIS",
		data() {
			return {
				width: uni.getSystemInfoSync().screenWidth,
				show: false,
				changeDefultAddress: {},
				scend_show: false,
				inputData: {
					name: '',
					phone: '',
					county: '',
					city: '',
					province: '',
					is_default: true,
					address: ''
				},
				rules: {
					'name': [{
							type: 'string',
							required: true,
							message: '姓名输入必填项',
							trigger: ['blur', 'change']
						},
						{
							required: true,
							min: 1,
							max: 4,
							message: '长度保持在1~4之间',
							trigger: ['blur', 'change']
						}
					],
					'phone': {
						validator: (rule, value, callback) => {
							uni.$u.test.mobile()
							return uni.$u.test.mobile(value);
						},
						required: true,
						message: '手机号格式不正确',
						trigger: ['blur', 'change']
					},
					'province': [{
							type: 'string',
							required: true,
							message: '省份属于必填项',
							trigger: ['blur', 'change']
						},
						{
							required: true,
							min: 2,
							max: 8,
							message: '长度保持在2~8之间',
							trigger: ['blur', 'change']
						}
					],
					'city': [{
							type: 'string',
							required: true,
							message: '城市属于必填项',
							trigger: ['blur', 'change']
						},
						{
							required: true,
							min: 2,
							max: 10,
							message: '长度保持在2~10之间',
							trigger: ['blur', 'change']
						}
					],
					"county": [{
							type: 'string',
							required: true,
							message: '区县属于必填项',
							trigger: ['blur', 'change']
						},
						{
							required: true,
							min: 2,
							max: 10,
							message: '长度保持在2~10之间',
							trigger: ['blur', 'change']
						}
					],
					'address': {
						type: 'string',
						required: true,
						message: '详细地址属于必填项',
						trigger: ['blur', 'change']
					}
				},

			};
		},
		computed: {
			...mapState('indexStore', ['addressDate']),
			
			DefultAddress() {
				return Object.keys(this.changeDefultAddress).length == 0 ? this.addressDate.map(item => {
					return item.is_default == 1 ? item : false
				})[0] || {} : this.changeDefultAddress
			}
		},
		watch: {
			"DefultAddress":{
				handler({id}) {
				     this.SETADDRESSID(id)
				},
				immediate: true,
				deep:true
			}
		},
		methods: {
			...mapMutations('indexStore',['SETADDRESSID']),
			...mapActions('indexStore', ['getOrdersData']),
			close() {
				this.show = false
			},
			changeAddress(index) {
				this.changeDefultAddress = this.addressDate[index]
				this.show = false
			},
			changDefultAddress(id, defult) {
				if (defult == 1) return
				this.getchangDefultAddress(id)
			},
			scendClose() {
				this.scend_show = false
			},
			async delAddress(id){
				uni.showModal({
					title:'确定删除此地址吗',
					success:async(res)=> {
						if(res.confirm){
							const reuslt = await uni.$u.api.reqDelAddress(id)
							if(reuslt == ''){
								if (await this.getOrdersData()) {
									uni.showToast({
										title: '已删除',
										icon: 'none'
									});
									this.show = true
								}
						}
						}
					}
				})
			},
			async getchangDefultAddress(id) {
				const result = await uni.$u.api.reqSetDefultAddress(id)
				if (result == '') {
					if (await this.getOrdersData()) {
						uni.showToast({
							title: '设置成功',
							icon: 'none'
						});
					}
				}
			},
			async sumNewAddress() {
				if (await this.$refs.form.validate()) {
					const reuslt = await uni.$u.api.reqNewAddress(this.inputData)
					if (reuslt === '') {
						if (await this.getOrdersData()) {
							uni.showToast({
								title: '添加成功',
								icon: 'none'
							});
							this.scend_show = false
							this.this.inputData = {
								name: '',
								phone: '',
								county: '',
								city: '',
								province: '',
								is_default: true,
								address: ''
							}
						}
					}
				}
			}
		},
	}
</script>

<style lang="scss">
	.uni-modal{
		z-index: 9999;
	}
	/deep/.uni-checkbox-input-checked {
		color: #57E3A8 !important;
	}

	.sumb_input {
		width: 80%;
		margin: 20px auto;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #57E3A8;
		border-radius: 20rpx;
	}

	.secend_hidden_input_chacked {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	/deep/.u-form-item__body {
		justify-content: center !important;
		width: 80%;
		margin: 10px auto;
		border: 2px solid black;
		border-radius: 20rpx;
	}

	/deep/.u-form-item__body__right {
		width: 460rpx !important;
		flex: none;
	}

	/deep/.u-form-item__body__left {
		width: 140rpx !important;
		padding-left: 20rpx;
		display: flex;
		margin-left: 20rpx;
	}

	.secend_hidden_titel {
		height: 150rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 60rpx;
		font-weight: 700;
		color: #57E3A8;
	}

	.address_info {
		font-weight: 700;
		right: 20rpx;
		bottom: 20rpx;
		border-radius: 15rpx;
		padding: 8rpx 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		position: absolute;
	}
	.delAddress{
		right: 200rpx;
		color: white;
		background-color: #E27175;
	}

	.isDefult {
		
		background-color: black;
		color: white;
	}

	.isNotDefult {
		background-color: #F9F871;
		color: black;
	}

	.add_address {
		width: 95%;
		height: 100rpx;
		background-color: #57E3A8;
		margin: 20rpx auto;
		display: flex;
		font-size: 90rpx;
		font-weight: 700;
		border: 5rpx black solid;
		justify-content: center;
		align-items: center;
		border-radius: 30rpx;
	}

	.addressBox_list {
		position: relative;
		width: 95%;
		height: 200rpx;
		border-radius: 30rpx;
		background-color: #57E3A8;
		margin: 20rpx auto;
		display: flex;
		padding-left: 20rpx;
		align-items: center;

		.address_name {
			font-size: 45rpx;
			font-weight: 700;
			width: 40%;
			text-align: center;
		}

		.address_text {
			font-size: 20rpx;
			font-weight: 600;
			margin-top: -40rpx;
		}
	}

	.addressBox,
	.secend_hidden {
		height: 900rpx;
	}
	
	.secend_hidden{
		padding-bottom: 20rpx;
	}


	.address {
		width: 100%;
		height: 150rpx;
		background-color: #57E3A8;
	}

	.address_main {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		padding: 5rpx 20rpx;

		.address_main_after {
			display: block;
			position: absolute;
			right: 30rpx;
			top: 60rpx;
			font-weight: 700;
			font-size: 10rpx;
			color: #555555;
		}

		.address_name {
			font-size: 45rpx;
			font-weight: 700;
		}

		.address_text {
			font-size: 20rpx;
			
		}
	}

	.nething {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		.address_button {
			width: 80%;
			height: 60%;
			border-radius: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color:#57E3A8;
			background-color: black;
			font-size: 40rpx;
			font-weight: 700;
		}
	}
</style>
